<template>
	<view>
			<block v-if="!user">
				<uv-empty mode="search" text="未登录 , 请先登录" :marginTop="160">
					<uv-button type="primary" text="去登录" @click="login" style="width:600rpx;margin:75rpx;"></uv-button>
				</uv-empty>
			</block>
			<block v-else>
			<view style="positon:relative;z-index:999;" id="leaflet" :prop="markerDataArr" :change:prop="leaflet.createMarker">
				<view class="tooltip user" @click="logout()">
					<uv-icon :size="24" name="account-fill" style="margin:12px;"></uv-icon>
				</view>
				<view class="tooltip refresh" @click="refresh()">
					<uv-icon :size="24" name="reload" style="margin:12px;"></uv-icon>
				</view>
			</view>
				<uv-popup ref="popup">
					<view style="width:auto;padding:12px;overflow-y:scroll;height:100vh;">
						<image :src="device.picture" mode="widthFix" @tap="sendCommand()"></image>
					</view>
				</uv-popup>
			</block>
	</view>
</template>
 
<script>
import { selectForCloud} from '@/api/device'
import { loading, modal, toast,routeUrl } from '../utils';
import { mapGetters } from 'vuex'
	export default{
		data(){
			return{
				// 标记数据
				markerDataArr:[],
				device:{}
			}
		},
		mounted() {
			if(this.user){
				this.selectForCloud({ refresh: 1 });
			}
		},
		computed:{
			...mapGetters(['user'])
		},
		methods:{
			logout(){
				modal('当前登录的用户为 '+this.user.name+ ',点击确定可退出登录','操作确认',() => {

						setTimeout(() => {
							const prefix = 'intelirri-';
							const keys = ['devices', 'devicesObj', 'project', 'projects', 'dclasses'];
							let count = 0;
							keys.forEach(item => {
								uni.removeStorageSync(`${prefix}${item}`);
								count++;
							});
							uni.removeStorageSync('user')
							uni.removeStorageSync('name')
							uni.removeStorageSync('avatar')
							uni.removeStorageSync('superable')
							
							uni.removeStorageSync('vue_admin_template_token')
							
							this.$store.commit('user/RESET_STATE')
							this.$store.commit('device/RESET_STATE')
							this.$tui.toast('操作成功')
						},300)
					
				})
			},
			refresh(){
				modal('确定要进行刷新操作吗？','操作确认',() => {
					this.selectForCloud()
				})
			},
			async login() {
				routeUrl('/pages/login');
			},
			sendCommand(){
					modal('确定要进行此操作吗？','操作确认',() => {
						loading('指令执行中')
						setTimeout(() => {
							toast('指令执行成功')
							uni.hideLoading()
						},3000)
					})
			},
			async selectForCloud(params = null) {
				const { data:{devices,project},msg } = await selectForCloud({project_id:116})
				toast(msg)
				this.markerDataArr = devices
			},
			// 测试
			test(val){
				this.device = val
				this.device.picture = '../static/images/device/'+val.dclassCode+'.png'
				this.$refs.popup.open('right')
			}
		}
	}
</script>
 
<script module="leaflet" lang="renderjs">
	import {dclassMap} from '@/utils/constant'
	import "leaflet/dist/leaflet.css"
	import L from "leaflet"
	export default {
		data() {
			return {
				map: null,
				urls:[
					'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=ecc4efeba82345383cdfda67f5154cf0',
					'http://t0.tianditu.gov.cn/cia_w/wmts?tk=ecc4efeba82345383cdfda67f5154cf0&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}'
				]
			}
		},
		mounted(){
			this.initLeaflet()
		},
		methods:{
			// 初始地图
			initLeaflet(){
				this.map = L.map('leaflet',{
					minZoom: 4,
					maxZoom: 17,
					zoom: 16,
					center: [44.565875, 85.6822658], 
					attributionControl: false,
					zoomControl: false,
				});
				this.urls.forEach((item) => {
					L.tileLayer(item).addTo(this.map)
				})
			},
			// 创建标记
			createMarker(newValue, oldValue, ownerInstance, instance){
				ownerInstance.$vm.markerDataArr.map((item,index)=>{
					let color = '#ff0000'
					let divIcon = this.getIcon(item)
					
					let marker = L.marker([item['lat'],item['lng']],{icon:divIcon}).addTo(this.map).on('click',(rel)=>{
						let dom = `<div>
						纬度：${rel['latlng']['lat']}<br/>
						经度：${rel['latlng']['lng']}
						</div>`
						let options = {
							className:'popup',
							// autoClose:false,
							closeOnEscapeKey:false,
						}
						rel['target'].bindPopup(dom,options);
						let tooltipOptions = {
							permanent: true,
							interactive: false,
							direction: 'bottom',
							offset: [0, 8],
							className: 'anim-tooltip'
						}
						rel['target'].bindTooltip(`<div>${item.name}</div>`,tooltipOptions)
						item.dclassCode = dclassMap[item.product_type]['code']
						ownerInstance.callMethod('test',item)
					})
				})
			},
			getIcon(item) {
				// eslint-disable-next-line no-undef
				return L.icon({
					iconSize: [28, 28],
					iconUrl: `https://img.intelirri.com/device/${dclassMap[item.product_type]['code']}/d_run.png`
				})
			}
		}
	}
</script>
<style lang="scss">
	.tooltip{
		border-radius:50%;
		position:fixed;
		right:24px;
		width:48px;
		height:48px;
		line-height:48px;
		text-align:center;
		z-index:1000;
		background:#fff;
	}
	.user{
		bottom:24px;
	}
	.refresh{
		bottom:96px;
	}
	#content{
		width: 100%;
		height: 100vh;
	}
	#leaflet{
		width: 100%;
		height: 100vh;
		border: 1px solid #aaa;
		z-index: 1;
	}
	.d-board {
		margin: 12px;
		border-radius: 4px;
		padding: 1%;
		.l {
			width: 50px;
			height: 50px;
			margin-right: 12px;
			image {
				width: 50px;
				height: 50px;
			}
		}
		.r {
			width: 100%;
			&-t {
				margin-bottom: 8px;
				color: #999;
				font-size:12px;
				&-l {
					font-size: 16px;
					color: #333;
					font-weight: bold;
				}
			}
			&-b {
				image {
					display: inline-block; /* 使容器成为行内块元素 */
					vertical-align: middle; /* 垂直居中对齐 */
					width: 14px;
					height: 14px;
					margin-right: 4px;
				}
				text {
					font-size: 14px;
					line-height: 18px;
					color: #666;
				}
			}
		}
	}
	.d-flex {
		display: flex;
	}
	.flex-column {
		flex-direction: column;
	}
	.mlauto {
		margin-left: auto;
	}
</style>